<template>
	<view class="padding-xs">
		<template v-if="type=='square'">
			<view class=" dflex-s padding-lr-sm pos-r padding-tb-xs border-radius-20" @click="goToPage"
				:style="{background: item.customstyle.color}">

				<view class="padding-tb-xs pos-r" style="flex-grow: 1;">
					<view class="">
						<view class="dflex-c padding-bottom-xs">
							<text class="fs-30 fwbd ft-white-2" style="line-height: 1.25;">
								{{ item.title.length > 0 ? item.title : '无标题' }}
							</text>
						</view>
						<view class="padding-tb-xs dflex ft-white-2 fs-25 padding-left-xs dflex-flow-c">
							<text class="fs-90" style="line-height: 1;">5</text>
							<text class="fs-50">days</text>
							{{type}}
						</view>
						<view>
							<text class="ft-white-2">{{item.nexttips}}</text>
						</view>

					</view>
					<view>
						<text class="clamp fs-20 ft-white-3">{{randomTangPoem}}</text>
					</view>
				</view>
			</view>
		</template>
		<template v-if="type=='circle'">
			<view class=" dflex-s padding-lr-sm pos-r padding-tb-xs border-radius-50" @click="goToPage"
				:style="{background: item.customstyle.color}">

				<view class="padding-tb-xs pos-r" style="flex-grow: 1;">
					<view class="">
						<view>
							<view class="dflex-c padding-bottom-xs padding-top-lg">
								<text class="fs-30 fwbd ft-white-2" style="line-height: 1.25;">
									{{ item.title.length > 0 ? item.title : '无标题' }}
								</text>
							</view>
							<view class="padding-tb-xs dflex ft-white-2 fs-25 padding-left-xs ">
								<text class="fs-90" style="line-height: 1;">5</text>
								<text class="fs-50">days</text>
								{{type}}
							</view>
							<view>
								<text class="ft-white-2">{{item.nexttips}}</text>
							</view>
						</view>
					</view>
					<view class="padding-bottom dflex-c">
						<text class="clamp fs-20 ft-white-3">{{randomTangPoem}}</text>
					</view>
				</view>
			</view>
		</template>
		<template v-if="type=='egg'">
			<view class=" dflex-s padding-lr-sm pos-r padding-tb-xs border-radius-egg" @click="goToPage"
				:style="{background: item.customstyle.color}">

				<view class="padding-tb-xs pos-r" style="flex-grow: 1;">
					<view class="">
						<view>
							<view class="dflex-c padding-bottom-xs padding-top-lg">
								<text class="fs-30 fwbd ft-white-2" style="line-height: 1.25;">
									{{ item.title.length > 0 ? item.title : '无标题' }}
								</text>
							</view>
							<view class="padding-tb-xs dflex ft-white-2 fs-25 padding-left-xs dflex-flow-c">
								<text class="fs-90" style="line-height: 1;">5</text>
								<text class="fs-50">days</text>
								{{type}}
							</view>
							<view>
								<text class="ft-white-2">{{item.nexttips}}</text>
							</view>
						</view>
					</view>
					<view>
						<text class="clamp fs-20 ft-white-3">{{randomTangPoem}}</text>
					</view>
				</view>
			</view>
		</template>
		<template v-if="type=='elliptic'">
			<view class=" dflex-s padding-lr-sm pos-r padding-tb-xs border-radius-sm" @click="goToPage"
				:style="{background: item.customstyle.color}">

				<view class="padding-tb-xs pos-r" style="flex-grow: 1;">
					<view class="">
						<view>
							<view class="dflex-s padding-bottom-xs">
								<text class="fs-30 fwbd ft-white-2" style="line-height: 1.25;">
									{{ item.title.length > 0 ? item.title : '无标题' }}
								</text>
							</view>
							<view class="padding-tb-xs dflex ft-white-2 fs-25 padding-left-xs dflex-flow-c">
								<text class="fs-90" style="line-height: 1;">5</text>
								<text class="fs-50">days</text>
								{{type}}
							</view>
							<view>
								<text class="ft-white-2">{{item.nexttips}}</text>
							</view>
						</view>
					</view>
					<view class="dflex-bs padding-tb-xs ft-dark-4 fs-23 w-full">
						<view style="min-width: 65px;" class="tal dflex-c">
							<text class="iconfont icon-weizhi-shi fs-40" style="color: #1694b0;"></text>
							<text class="fs-23 ft-dark-2 " style="line-height: 36rpx;">{{item.orgaddress}}</text>
						</view>
					</view>
					<view>
						<text class="clamp fs-20 ft-white-3">{{randomTangPoem}}</text>
					</view>
				</view>
			</view>
		</template>

	</view>
</template>

<script setup>
	/*
	  1、定义4套模板，
	*/
	import {
		ref,
		defineEmits,
		computed,
		onMounted,
		getCurrentInstance
	} from 'vue'

	const {
		ctx
	} = getCurrentInstance();
	// console.log("ctx", ctx);
	const colors = ref([
		'#888888', '#BBBB00', '#007799', '#550088', '#FFA07A', '#B8860B', '#006400', '#1E90FF', '#00AA00'
	])
	const porps = defineProps({
		item: Object,
		type: String
	})
	// console.log(porps.item,porps.type)
	// 2、定义发射给父组件的方法
	const emits = defineEmits(['onclick', 'clickItem'])
	const onclick = () => {
		emits('clickItem')
	}
	onMounted(() => {});
	const goToPage = function() {
		console.log("页面跳转");
		uni.navigateTo({
			url: `/pages/matter/detail?id=` + porps.item.eid_transaction_id
		});
	}
	const tangPoems = [
		"白日依山尽，黄河入海流。",
		"白日映红装，春风吹酒浓。",
		"明月出天山，苍茫云海间。",
		"白日依西山，黄河入东海。",
		"白日依南山，黄河入北流。",
		"明月松间照，清泉石上流。",
		"白日依青山，黄河入碧海。",
		// Add more Tang poems here
	];

	function generateRandomTangPoem() {
		const randomIndex = Math.floor(Math.random() * tangPoems.length);
		return tangPoems[randomIndex];
	}

	const randomTangPoem = generateRandomTangPoem();
	// console.log("随机生成的唐诗：", randomTangPoem);
</script>

<style lang="less">
	.item {
		line-height: 1;
		position: relative;
		border-bottom: 1px solid #f0f0f0;

		.icon_yibanjie::before {
			position: absolute;
			right: 10px;
			font-size: 32px;
			color: #23b500;
			top: 0;
			opacity: 0.8;
		}

		.typeIcon {
			width: 48px;
			height: 48px;
		}

		.badge {
			position: absolute;
			right: -2px;
			top: -5rpx;
			transform: translate(0, -50%);
			background-color: #ff2a00;
			line-height: 1;
			width: 18px;
			height: 18px;
			padding: 0;
			line-height: 18px;
			text-align: center;
			color: #fff;
			font-size: 10px;
			border-radius: 50%;
		}

	}

	.item::before {
		position: absolute;
		right: 10px;
		font-size: 32px;
		color: #ccc;
		top: 0;
		opacity: 0.8;
	}

	.sticky {
		background-color: #fafafa;
	}
</style>